<template>
    <section class="Jobs-section">
        <app-header></app-header>

        <!--背景图-->
        <article class="bg-box">
            <div class="inside">
                <div class="container">
                    <h2>Join Us</h2>
                    <h1>
                        <p class="clearfix">
                            <i class="iconfont icon-zhaopin"></i> 加入我们
                        </p>
                    </h1>
                </div>
            </div>
        </article>

        <!--招聘职位列表-->
        <div class="content">
            <div class="container">
                <a-table :dataSource="jobData" :loading="jobsListLoading" expandRowByClick :pagination="false" v-show="!noDataShow" rowKey="id">
                    <a-table-column title="职位名称" dataIndex="position" key="position">
                        <template slot-scope="text, record">
                            <span>{{ isNull0(record.position) }}</span>
                        </template>
                    </a-table-column>
                    <a-table-column title="职位类型" dataIndex="jobType" key="jobType">
                        <template slot-scope="text, record">
                            <span>{{ isNull0(record.jobType) }}</span>
                        </template>
                    </a-table-column>
                    <a-table-column title="所属部门" dataIndex="department" key="department">
                        <template slot-scope="text, record">
                            <span>{{ isNull0(record.department) }}</span>
                        </template>
                    </a-table-column>
                    <a-table-column title="地点" dataIndex="city" key="city">
                        <template slot-scope="text, record">
                            <span>{{ isNull0(record.city) }}</span>
                        </template>
                    </a-table-column>
                    <a-table-column title="人数" dataIndex="num" key="num">
                        <template slot-scope="text, record">
                            <span>{{ isNull0(record.num, '人') }}</span>
                        </template>
                    </a-table-column>
                    <a-table-column title="发布时间" dataIndex="publishTime" key="publishTime">
                        <template slot-scope="text, record">
                            <span>{{ momentFormat(record.publishTime, 'YYYY-MM-DD') }}</span>
                        </template>
                    </a-table-column>
                    <a-table-column title="申请职位" dataIndex="id" key="id">
                        <template slot-scope="text, record">
                            <a-button type="primary" size="large" @click="showUploadResumeModal(record.id)">
                                <i class="iconfont icon-tubiaolunkuo_huaban"></i> 立即申请
                            </a-button>
                        </template>
                    </a-table-column>
                    <p slot="expandedRowRender" slot-scope="record" style="margin: 0" v-html="isNull0(record.content) + isNull0(record.requirement) + isNull0(record.contact)"></p>
                </a-table>
                <div class="Pagination" style="text-align: center; margin: 30px 0 0 0;" v-show="!noDataShow">
                    <a-pagination
                            :showTotal="total => `共 ${total} 条`"
                            showQuickJumper
                            showSizeChanger
                            :current="pageNumber"
                            :pageSize="pageSize"
                            :total="total"
                            @change="pageNumberChange"
                            @showSizeChange="pageSizeChange"/>
                </div>
                <h5 style="text-align: center; padding: 15px;" v-show="noDataShow">暂未查询到数据！</h5>
            </div>
        </div>

        <!--上传简历modal-->
        <a-modal
            title="请上传您的简历附件"
            :visible="UploadResumeModalShow"
            :footer="null"
            @cancel="handleCancel"
            class="Upload-resume-modal">
            <p style="margin: 0 0 15px 0;"><i class="iconfont icon-wenjian"></i>支持 word、pdf、ppt 格式文件，文件大小需小于 10M.</p>
            <template>
                <a-upload
                    name="myFile"
                    action="uploadAction"
                    accept=".pdf, .word, .ppt"
                    :fileList="fileList"
                    @remove="handleRemove"
                    :beforeUpload="beforeUpload">
                    <a-button>
                        <i class="iconfont icon-wenjian"></i> 选择文件
                    </a-button>
                </a-upload>
                <a-button type="primary" @click="handleUpload" :disabled="fileList.length === 0" :loading="uploading" style="margin: 15px 0 0 0;">
                    <template v-if="uploading">上传中...</template>
                    <template v-else><a-icon type="upload" /> 开始上传</template>
                </a-button>
            </template>
        </a-modal>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../components/header.vue';//公共组件——头部
    import BackTop from '../components/BackTop.vue';//公共组件——返回顶部

    export default {
        data() {
            return {
                jobData:[], // 招聘数据
                jobsListLoading: true,//招聘职位列表加载loading
                noDataShow: false,//展会列表数据——没有数据提示信息是否显示
                pageNumber: 1,  //默认显示第一页
                pageSize: 10,   //默认每页显示10条
                total: 0,    //总条数

                jobId: '',//应聘职位的id
                UploadResumeModalShow: false,// 上传简历modal框是否显示
                fileList: [],   //已选择的上传文件列表
                uploading: false, //确定上传按钮的加载loading

                uploadAction: null,//上传简历接口的URL

            }
        },
        metaInfo () {
            return {
                title: '招聘信息_华美优胜美国房地产投资公司',
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: '公司招聘，华美优胜公司招聘，华美优胜招聘' },
                    { vmid: 'description', name: 'description', content: '华美优胜公司招聘' },

                ],
            }
        },
        computed: {},
        created() {
        },
        mounted() {
            //获取招聘职位列表数据
            this.getJobData()
        },
        methods: {
            //处理currentPage当前页变动的事件
            pageNumberChange(page, pageSize) {
                this.pageNumber = page;
                this.jobsListLoading = true;
                this.getJobData();
            },
            //处理pagesize页码大小变动的事件
            pageSizeChange(current, size) {
                this.pageNumber = 1;
                this.pageSize = size;
                this.jobsListLoading = true;
                this.getJobData();
            },
            //获取招聘职位列表数据
            getJobData() {
                this.$get(`/job/list/${this.pageNumber}/${this.pageSize}`).then(res => {
                    this.jobsListLoading = false;
                    if (res.status == 0) {
                        this.jobData = res.list;
                        this.total = res.total;
                        this.noDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.total = 0;
                        this.noDataShow = true;
                    }
                })
            },
            //上传简历
            showUploadResumeModal(id) {
                this.UploadResumeModalShow = true;
                this.jobId = id;
                this.uploadAction = 'https://www.hmoversea.com/api/v1/job/send/email/'+ id;
            },
            // 点击移除文件时的回调
            handleRemove(file) {
                const index = this.fileList.indexOf(file);
                const newFileList = this.fileList.slice();
                newFileList.splice(index, 1);
                this.fileList = newFileList;
            },
            // 上传文件之前的钩子，参数为上传的文件
            beforeUpload(file) {
                this.fileList = [...this.fileList, file];
                return false;
            },
            //确定上传文件
            handleUpload() {
                const { fileList } = this;
                const formData = new FormData();
                fileList.forEach((file) => {
                    formData.append('myFile', file);
                });
                this.uploading = true;
                this.$axios.post('https://www.hmoversea.com/api/v1/job/send/email/'+ this.jobId, formData, {
                    headers: {'Content-Type': 'multipart/form-data'}
                }).then(res => {
                    Promise.resolve(res.data);
                    this.uploading = false;
                    if (res.data.status == 0) {
                        this.fileList = [];
                        this.UploadResumeModalShow = false;
                        this.$notification.success({
                            message: '您的简历附件上传成功！',
                        });
                    } else {
                        this.$notification.error({
                            message: res.data.msg,
                        });
                    }
                }).catch(error => {
                    Promise.reject(error);
                    this.$notification.success({
                        message: error,
                    });
                });
            },
            //关闭上传简历modal框
            handleCancel(e) {
                this.UploadResumeModalShow = false;
            },


        },
        components: {
            'app-header': Header,
            BackTop,
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        .Jobs-section {
            background: #f5f5f5;
            //背景图
            .bg-box{
                background: url(/static/img/Join-Us3.jpg) no-repeat center center;
                background-size: 100%;
                padding: 0 !important;
                >.inside {
                    background: rgba(15, 40, 54, 0.6);
                    > .container {
                        padding: 150px 0;
                        text-align: center;
                        > h2 {
                            font-size: 35px;
                            font-family: 'HelveticaNeue-UltraLight', "PingFang SC", 'Microsoft Yahei', Arial, Verdana, sans-serif;
                            font-weight: 100;
                            color: #fff;
                        }
                        > h1 {
                            line-height: 35px;
                            font-size: 30px;
                            padding: 20px 0 30px 0;
                            color: #fff;
                            > p {
                                display: inline-block;
                                > i {
                                    font-size: 35px;
                                    color: #3cd0c5;
                                    float: left;
                                    margin: 0 10px 0 0;
                                }
                            }
                        }
                    }
                }
            }

            .content {
                padding: 30px 0;
                > .container {
                    padding: 0;
                }
            }

        }
    }
</style>
